<template>
    <view class="pages">

        <view>
            <view class="song-list">
                <view v-for="(item) in songStore.songs" :key="item.id" class="song-item">
                    <text class="song-desc">{{ item.name }}</text>
                    <button class="delete-btn" @click="deleteSong(item.id)">删除</button>
                </view>
            </view>
        </view>

        <textarea v-model="formData.content" class="content-textarea" placeholder="请输入内容" :maxlength="30000"
            :adjust-position="false" />
        <InputField v-model="formData.count" label="数量" required placeholder="请输入数量" />

        <view class="btns">
            <CustomButton text="生成歌词" @click="onSong" backgroundColor="#409eff" />
            <CustomButton text="保存歌曲" @click="onSaveSong" backgroundColor="#06a020" />
        </view>
       

        <LyricsTabs v-if="list.length" v-model:currentTab="currentTab" :list="list" :sections="sections" @edit="showEdit" @img="showImg" />

        <!-- 使用手动控制的弹窗 -->
        <EditPopup ref="popup" :editContent="editContent" @update:editContent="handleEditContentUpdate"
            @confirm="confirmEdit" />
        <FormPopup ref="imgPopup" v-model:content="imgFormData.content" v-model:scene="imgFormData.scene" v-model:total="imgFormData.count"
            @confirm="loadImg" />

        <SongPopup ref="songPopup" v-model:name="songFormData.name" v-model:description="songFormData.description" @confirm="saveSongInfo" />
    </view>
</template>

<script setup>
import InputField from '@/components/InputField.vue';
import LyricsTabs from './components/LyricsTabs.vue';
import EditPopup from './components/EditPopup.vue';
import FormPopup from './components/FormPopup.vue';
import SongPopup from './components/SongPopup.vue';
import { useSongGenerator } from './hooks/useSongGenerator';
import CustomButton from '@/components/CustomButton.vue'
import { ref, onMounted } from 'vue';
import { useSongStore } from '@/stores/songs'

const songStore = useSongStore()

onMounted(() => {
    songStore.fetchSongs();
})


// 获取 popup 的引用
const popup = ref(null);
const imgPopup = ref(null);
const songPopup = ref(null);

// 将 popup 传递给 useSongGenerator
const { songFormData, saveSongInfo, onSaveSong, currentTab, formData, showImg, loadImg, imgFormData, list, sections, showEdit, hideEdit, confirmEdit, editContent, onSong } = useSongGenerator(popup, imgPopup, songPopup);

// 处理编辑内容更新
const handleEditContentUpdate = (newContent) => {
    editContent.value = newContent;
};


const deleteSong = (id) => {
    uni.showModal({
        title: '提示',
        content: '确定要删除这首歌吗？',
        success: (res) => {
            if (res.confirm) {
                songStore.deleteSong(id);
            }
        }
    });
};
</script>

<style lang="scss" scoped>
.pages {
    padding: 30rpx;
    display: flex;
    flex-direction: column;
    gap: 30rpx;
}
.content-textarea{
    border: solid 1px #ccc;
    box-sizing: border-box;
    padding: 20rpx;
    width: 100%;
    border-radius: 8rpx;
}

.song-list {
    margin-bottom: 30rpx;
}

.song-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20rpx;
    background: #f8f9fa;
    border-radius: 12rpx;
    margin-bottom: 16rpx;

    .song-desc {
        flex: 1;
        font-size: 28rpx;
        color: #333;
        margin-right: 20rpx;
    }

    .delete-btn {
        flex-shrink: 0;
        padding: 10rpx 30rpx;
        font-size: 24rpx;
        color: #fff;
        background: #ff4d4f;
        border-radius: 6rpx;
        border: none;
        line-height: 1.5;

        &::after {
            display: none;
        }
    }
}
.btns{
    display: flex;
    gap: 20rpx;
    margin: 20rpx 0;
    :deep(button){
        flex: 1;
    }
}
</style>